<script lang="ts" setup>
import { computed } from 'vue';

const props = withDefaults(defineProps<{ cols?: number, colGap?: number, rowGap?: number }>(), {
    cols: 1,
})

const styles = computed(() => ({
    gridTemplateColumns: `repeat(${props.cols}, 1fr)`,
    columnGap: `${props.colGap}px`,
    rowGap: `${props.rowGap}px`,
}))
</script>

<template>
    <div class="umrp-grid" :style="styles">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-grid {
    display: grid;
}
</style>